<template>
    <div>
        <div>
            <!-- tag可以转换标签 -->
            <transition-group tag="ul" name="groupfadein">
                <li :key=item v-show="index==(curIndex-1)" class="item-li" v-for="(item,index) in list">{{item}}-{{index}}</li>
            </transition-group>
                 
            <button @click="showAnima">点击我</button>
        </div>

    </div>
</template>

<script>
    export default {
        name: "demo",
        data() {
            return {
               isShow : false ,
               list : [
                '列表1','列表2','列表3'
               ],
               curIndex : 1
            }
        },
        methods : {
            showAnima(){
                // this.isShow = !this.isShow
                this.curIndex += 1;
                if(this.curIndex > this.list.length){
                    this.curIndex = 1;
                }
                
            },
            
        }
        
    }
</script>

<style scoped>
    ul{
        position: relative;
        display: block;
        margin: 20px 0;
        height: 50px;
    }
    .item-li{
        display: block;
        margin: 10px 0 ;
        border:10px solid green;
        box-sizing: border-box;
        color: #fff;
        text-align: center;
        /*height: 20px;*/
        background-color: red;
        transform: translateX(0%); 
        position: absolute;
        width: 100%;
    }
    .groupfadein-enter{
        transform: translateX(100%); 
    }
    .groupfadein-enter-to{
        transform: translateX(0%); 
    }
    .groupfadein-leave-to{
        transform: translateX(-100%); 
    }
    .groupfadein-leave-active,
    .groupfadein-enter-active{
        transition: all 2s;
    }

</style>
